<template>
	<view class="goods-list">

		<view class="goods-item" v-for="item in goodslist" :key="item.id" @tap="productInfo(item.id)">

			<img :src="item.img" />
			<view class="info">
				<h1 class="title">{{item.name}}</h1>
				<span class="brief">{{item.brief}}</span>
				<p class="price">
					<span class="new">￥{{item.price}}</span>
					<span class="old">￥{{item.price_old}}</span>
				</p>
			</view>

		</view>


	</view>
</template>

<script>
	export default {


		data() {
			return {

			}
		},
		
		methods:{
			productInfo(id){
				console.log(id)
				uni.navigateTo({
					// animationType:AccessFailCallbackResult,
					
					url:"/components/goods/goods?id="+encodeURIComponent(JSON.stringify(id))
				})
			}
		},
		props: ['goodslist'],

	}
</script>

<style lang="scss" scoped>
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		padding: 7px;
		padding-top: 0px;
	}


	.goods-item {
		width: 48%;
		border: 1px solid #ccc;
		background-color: #fff;

		margin-top: 7px;

		box-shadow: 0 0 7px #ccc;
		padding: 2px;

		display: flex;
		flex-direction: column;
		justify-content: space-between;

		img {
			width: 100%;
			min-height: 170px;
		}

		.title {
			padding-top: 2px;
			font-size: 15px;
			text-align: center;
		}

		.info {
			background-color: #fff;
			overflow: hidden;
			text-align: center;

			.brief {
				font-size: 12px;
			}

			p {
				margin: 3px;
			}

			.price {
				.new {
					color: red;
					font-size: 16px;
					font-weight: bold;
					margin-right: 10px;
				}

				.old {
					text-decoration: line-through;
					font-size: 12px;
				}
			}
		}
	}
</style>
